<template>
  <el-table
    :data="vipProductList"
    border
    align="center"
    style="width: 100%"
    v-loading="loading"
  >
    <el-table-column label="产品图片" width="130" align="center">
      <template v-slot="{ row }">
        <el-avatar
          shape="square"
          :size="30"
          fit="scale-down"
          :src="row.imageUrl"
          style="width: 95px; padding: 0.1px; background-color: white"
        ></el-avatar>
      </template>
    </el-table-column>
    <el-table-column
      label="产品名称"
      prop="productName"
      align="center"
    ></el-table-column>
    <el-table-column
      label="产品描述"
      prop="description"
      align="center"
    ></el-table-column>
    <el-table-column label="价格" prop="price" align="center"></el-table-column>
    <el-table-column
      label="库存"
      prop="inventory"
      align="center"
    ></el-table-column>
    <el-table-column label="操作" width="130" align="center">
      <template v-slot="{ row }">
        <el-button
          type="primary"
          @click="pre_order(row)"
          icon="iconfont icon-vip3"
          style="width: 100px"
        >
          <span style="font-size: 13px; vertical-align: super">充值</span>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="less" scoped>
/deep/.icon-vip3 {
  font-size: 30px;
}
/deep/.el-button {
  padding: 0;
}
</style>
<script>
import * as payApi from "@/api/pay";

export default {
  directives: {
    isBusy: {
      inserted(el, binding) {
        console.log(el);
        console.log(binding);
      },
    },
  },
  async created() {
    this.loading = true;
    let res = await payApi.getVipProduct();
    this.loading = false;
    this.vipProductList = res.data.data;
  },
  id: "11",
  pid: "7",
  meta: {
    name: "vip充值",
    title: "vipCharge",
    icon: "iconfont icon-chongzhi",
  },
  data() {
    return {
      loading: true,
      vipProductList: [],
    };
  },
  methods: {
    pre_order(row) {
      this.$confirm(`您正在充值${row.description}`, "购买提示", {
        type: "info",
      })
        .then(() => {
          // SET_CURRENT_PRODUCT()
          this.$store.commit("SET_CURRENT_PRODUCT", row);
          this.$router.push({ name: "preorder" });
        })
        .catch(() => {
          this.$message.warning("已取消购买");
        });
    },
  },
};
</script>
